<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.bootstrap样式-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <!--2.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--3.jquery 插件-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <style>
        #dat1 {
            width: 1000px;
            height: auto;
            border: solid 1px #bce8f1;
            position: absolute;
            top: 80px;
            left: 180px;
        }

        #selectDate {
            float: left;
        }

        .te1 {
            width: 100px;
        }

    </style>

    <script>
        let userDate;//保存接收数据
        let Total;//计算页数;
        let page = 1;//首页
        let currentpage;//当前页
        let data;//操作后台值
        let url;//操作路径
        let now;//现在的页数
        let flag=true;

        $(function () {
            url= "http://localhost:8080/user/sel";
            data = {
                str: "select"
            }
            $.post(url, data, function (result) {
                userDate = result.userDate;
                let size = result.size;
                currentpage = 0;//当前页
                Total = size % 9 === 0 ? size / 9 : Math.ceil(size / 9);//计算页数;Math.ceil()向上取整
                //控制数据行数
                tableDate(userDate, currentpage);
                ulDate(Total);
            })
        })

        //分页按钮
        function ulDate(Total) {
            $("#u").append(
                $("<li>").append(
                    $("<p class=\"navbar-text\">").append(
                        $("<button type=\"button\" class=\"btn btn-default navbar-btn\" onclick='cent(1)' style=\"height: 30px\">").text("首页"))),
                $("<li>").append(
                    $("<a href=\"#\" aria-label=\"Previous\" onclick=\"tp()\">").append(
                        $("<span aria-hidden=\"true\">").text("上一页"))))
            for (let i = 1; i <= Total; i++) {
                $("#u").append(
                    $("<li>").append(
                        $("<a href=\"#\" onclick='cent(" + i + ")'>").text(i)))
            }
            $("#u").append(
                $("<li>").append(
                    $("<a href=\"#\" aria-label=\"Next\" onclick=\"btn()\" >").append(
                        $("<span aria-hidden=\"true\">").text("下一页"))),
            $("<li>").append(
                $("<p class=\"navbar-text\">").append(
                    $("<button type=\"button\" class=\"btn btn-default navbar-btn\" onclick='cent(Total)' style=\"height: 30px\">").text("尾页"))))
        }

        //下一页
        function btn() {
            if (Total > now+1) {
                $("#tab  tr:not(:first)").empty("");
                currentpage = currentpage + 9;
                tableDate(userDate, currentpage)
            }
        };

        //中间页
        function cent(i) {
            currentpage = i - 1
            $("#tab  tr:not(:first)").empty("");
            currentpage = currentpage * 9;
            tableDate(userDate, currentpage);

        };

        //上一页
        function tp() {
            if (currentpage > 0) {
                $("#tab  tr:not(:first)").empty("");
                currentpage = currentpage - 9;
                tableDate(userDate, currentpage)
            }
        };

        //控制每页数据条数
        function tableDate(userDate, currentpage) {
            now=Math.ceil(currentpage/ 9);
            for (let i = 0; i < 9; i++) {
                let category = userDate[currentpage + i]
                if (category != null) {
                    $("#tab").append(
                        $("<tr align='center'>").append(
                            $("<td>").append(
                                $("<input type=\"checkbox\" class='ch' value='"+category.name+"'>")
                            ),
                            $("<td id='cna'>").text(category.name),
                            $("<td>").text(category.phone),
                            $("<td>").text(category.wechat),
                            $("<td>").text(category.datetime),
                            $("<td>").append(
                                $("<a onclick='deleteDate()'>").text("删除"),)))}
            }
        }

        //删除模块
        function deleteDate() {
            url= "http://localhost:8080/user/del";
            let cna = document.getElementById('cna').innerHTML;
            let obj = {
                name: cna,
                phone: "0",
                wechat: "0",
                datetime: "0"
            }
            let jsonStr = JSON.stringify(obj)
            JSON.stringify(obj)
            $(function () {
                data = {
                    information: jsonStr
                }
                $.post(url, data, function (result) {
                    alert("操作成功")
                })
            })
            location.reload();
        }

        //按昵称和手机号模糊查询
        function search1() {
            url= "http://localhost:8080/user/namesel";
            let searchValue = $("#sear").val();
            $(function () {
                data = {
                    str: "nameSelect",
                    str1: searchValue
                }
                $.post(url, data, function (result) {
                    $("#tab  tr:not(:first)").empty("");
                    userDate = result.userDate;
                    let size = result.size;
                    currentpage = 0;//当前页
                    Total = size % 9 === 0 ? size / 9 : Math.ceil(size / 9);//计算页数;Math.ceil()向上取整
                    //控制数据行数
                    tableDate(userDate, currentpage);
                    //ulDate(Total);
                })
            })
        }

        //按时间范围查找
        function search2() {
            url= "http://localhost:8080/user/timesel";
            let tex1 = $("#tex1").val();
            let tex2 = $("#tex2").val();
            $(function () {
                data = {
                    str: "timeSelect",
                    forward: tex1,
                    next: tex2,
                }
                $.post(url, data, function (result) {
                    $("#tab  tr:not(:first)").empty("");
                    userDate = result.userDate;
                    let size = result.size;
                    currentpage = 0;//当前页
                    Total = size % 9 === 0 ? size / 9 : Math.ceil(size / 9);//计算页数;Math.ceil()向上取整
                    //控制数据行数
                    tableDate(userDate, currentpage);
                    //ulDate(Total);
                })
            })
        }

        //数据添加函数模块
        function add() {
            if (flag){
                flag=false;
            //location.reload();
            $("#tabAdd").append(
                $("<tr align='center'>").append(
                    $("<td>").append(
                        $("<input type=\"text\" value=\"昵称\" id='b1'>")),
                    $("<td>").append(
                        $("<input type=\"text\" value=\"手机号\" id='b2'>")),
                    $("<td>").append(
                        $("<input type=\"text\" value=\"微信号\" id='b3'>")),
                    $("<td>").append(
                        $("<button onclick='tj()'>").text("提交")),))

            }
        }

        //数据添加副函数
        function tj() {
            flag=true;
            url= "http://localhost:8080/user/add";
            var b1 = document.getElementById("b1").value;
            var b2 = document.getElementById("b2").value;
            var b3 = document.getElementById("b3").value;

            var myDate = new Date();
            var fullYear = myDate.getFullYear();
            var month = myDate.getMonth();
            var date = myDate.getDate();

            let day=""+fullYear+"-"+(month+1)+"-"+date+""

            let obj = {
                name: b1,
                phone: b2,
                wechat: b3,
                datetime: day
            }

            let jsonStr = JSON.stringify(obj)
            JSON.stringify(obj)
            $(function () {
                data={
                    information: jsonStr
                }
                $.post(url, data, function () {
                    alert("添加成功")
                    location.reload();
                })
            })
        }

        function del(){
            var elementsByName = document.getElementsByClassName("ch");
            for (var i = elementsByName.length-1; i>=0 ; i--){
                    if (elementsByName[i].checked){
                        url= "http://localhost:8080/user/del";
                        let cna = document.getElementsByClassName("ch")[i].value;
                        let obj = {
                            name: cna,
                            phone: "0",
                            wechat: "0",
                            datetime: "0"
                        }
                        let jsonStr = JSON.stringify(obj)
                        JSON.stringify(obj)
                        $(function () {
                            data = {
                                information: jsonStr
                            }
                            $.post(url, data, function (result) {
                            })
                        })
                }
            }
            location.reload();
        }

    </script>
</head>
<body>
<div id="dat1" class="con">
    <div>
        <div style="height: 50px" id="selectDate">
            <table>
                <tr>
                    <td>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="search1()">搜索</button>
      </span>
                                    <input type="text" id="sear" class="form-control" placeholder="昵称或手机号"
                                           style="width: 200px">
                                </div><!-- /input-group -->
                            </div>
                        </div>
                    </td>

                    <td>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>

                    <td>
                        <div>
                            注册时间<input type="date" style="width: 100px" id="tex1" class="te1">
                            至<input type="date" id="tex2" class="te1"><input type="button" value="查询" onclick="search2()">
                        </div>
                    </td>

                    <td>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                    </td>

                    <td>
                        <button onclick="add()">&nbsp;&nbsp;&nbsp;&nbsp;添&nbsp;加&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    </td>
                    <td>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
                    <td>
                        <button onclick="del()">删除选中</button>
                    </td>
                </tr>
            </table>

        </div>
        <div>
            <hr>
        </div>
    </div>

    <table border="1px" cellpadding="1px;" style="width:1000px;height: 30px" id="tabAdd">
    </table>

    <form>
        <table border="1px" cellpadding="1px;" style="width:1000px;height: 30px" id="tab">
            <tr align="center" style="font-size: 18px ;font-weight: bold">
                <td><input type="checkbox"></td>
                <td>昵称</td>
                <td>手机号</td>
                <td>微信号</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
        </table>
    </form>
    <nav aria-label="Page navigation">
        <ul class="pagination" id="u">
        </ul>
    </nav>
</div>
</body>
</html>